var MaterialMatchBoard = function () {
  var template = /* html */ `
    <div class="material-match-board" v-loading.fullscreen.lock="loading">
      <search-btns has-search ref="searchBtns" search-btn-text="查询" search-title="查询条件" @after-leave="afterLeave" mode="dialog" v-if="isShow">
        <div slot="search">
          <search-form :search="search" :dropdown-data="dropdownData" @search-data="searchData"></search-form>
        </div>
      </search-btns>
      <div class="material-match-title">
        <span>车间配套看板</span>
        <div class="material-match-btn" v-if="isShow">
          <el-button size="small" @click="toConfigBoard">配置</el-button>
        </div>
      </div>
      <div class="material-match-content" v-if="isShow" :key="boardId">
        <board-table :table-col-config="tableColConfig" :table-data="searchOrderMatchList" @row-click="lookDetail"></board-table>
      </div>

      <el-dialog fullscreen class="dialog-fullscreen" title="看板显示列配置" :visible.sync="openConfig">
        <div style="height:100%;overflow:auto">
          <table-config v-if="openConfig" :config="tableColConfig" :dropdown-data="dropdownData" @config-success="configSuccess">
          </table-config>
        </div>
      </el-dialog>

      <div class="board-dialog" v-if="openDetail">
        <div class="dialog-header">
          <span class="dialog-header-title">配套明细</span>
          <div class="dialog-header-btn" @click="detailClosed">
            <i class="el-icon-close" style="color:#909399"></i>
          </div>
        </div>
        <div class="dailog-body">
          <order-detail v-if="openDetail" :order-match="selectOrderMatch"></order-detail>
        </div>
      </div>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    data: function () {
      return {
        loading: false,
        isShow: false,
        openConfig: false,
        search: new MaterialMatchInfoSearch(),
        tableColConfig: new TableColConfig(),
        dropdownData: [],
        orderMatchList: [],
        searchOrderMatchList: [],
        boardId: SysUtil.getId(),
        openDetail: false,
        selectOrderMatch: null
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      return ModuleUtil.setTableColData(this.tableColConfig).then(function () {
        return self.setOrderMatchList().then(function () {
          self.isShow = true;
          self.loading = false;
          self.boardRunning();
        });
      }).catch(function () {
        self.isShow = true;
        self.loading = false;
      });
    },

    methods: {
      setOrderMatchList: function () {
        var self = this;
        return ajaxRequest('displayView/getOrderMatchingDetail').then(function (orderMatchList) {
          var orderMatchs = [];
          var deptObj = self.tableColConfig.deptObj;
          for (var i = 0; i < orderMatchList.length; i++) {
            var orderMatch = orderMatchList[i];
            orderMatch = new MaterialMatchInfo(orderMatch, deptObj);
            orderMatchs.push(orderMatch)
          }
          self.setDropdownData(orderMatchs);
          self.orderMatchList = orderMatchs;
          self.toSearchOrderMatchList();
          return orderMatchs;
        });
      },

      setDropdownData: function (orderMatchs) {
        var dropdownData = _.map(orderMatchs, function (orderMatch) {
          var searchOrder = orderMatch.getSearchOrder();
          return searchOrder;
        });
        this.dropdownData = dropdownData;
      },

      afterLeave: function () {
        this.search.resetOldData();
      },

      searchData: function () {
        this.loading = true;
        var self = this;
        setTimeout(function () {
          self.search.saveOldData();
          self.$refs['searchBtns'].closePopover();
          self.toSearchOrderMatchList();
          self.loading = false;
          self.boardId = SysUtil.getId();
        }, 500);
      },

      toSearchOrderMatchList: function () {
        var orderMatchList = this.orderMatchList;
        var search = this.search;
        orderMatchList = _.filter(orderMatchList, function (orderMatch) {
          return search.filterData(orderMatch);
        });
        this.searchOrderMatchList = orderMatchList;
      },

      toConfigBoard: function () {
        this.openConfig = true;
      },

      configSuccess: function () {
        this.openConfig = false;
      },

      lookDetail: function (orderMatch) {
        if (this.selectOrderMatch === orderMatch) {
          return;
        }
        this.selectOrderMatch = orderMatch;
        this.openDetail = true;
      },

      detailClosed: function () {
        this.openDetail = false;
        this.selectOrderMatch = null;
      },

      boardRunning: function () {
        this.clearTimeoutList();
        this.materialDataRunning();
      },

      materialDataRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.setOrderMatchList().then(function () {
            self.boardId = SysUtil.getId();
          });
          self.timeoutList[0] = null;
          self.materialDataRunning();
        }, 1.5 * 3600 * 1000);
        this.timeoutList[0] = timeout;
      }
    },

    components: {
      SearchBtns: SearchBtns,
      SearchForm: SearchForm,
      TableConfig: TableConfig,
      BoardTable: BoardTable,
      OrderDetail: OrderDetail
    },

    template: template
  };
}();
